<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WRAITH</title>
    <style>
        :root {
            --colors-primary1: #00B3B3;
            --colors-white: #ffffff;
            --colors-transparent: transparent;
            --colors-light-blue-800: #17a1e6;
            --colors-gray-50: #fafbfc;
            --colors-gray-100: #f7f9fa;
            --colors-gray-200: #f2f6f7;
            --colors-gray-300: #dfe4e8;
            --colors-gray-400: #d4d8db;
            --colors-gray-500: #6a7c8f;
            --colors-gray-600: #637282;
            --colors-gray-700: #47525d;
            --colors-gray-800: #3c444d;
            --colors-gray-900: #1b2733;
            --colors-blue-800: #2483B3;
            --colors-blue-800-a08: #ebf1f6;
            --colors-navi-800: #475e66;
            --colors-green-800: #39BF7C;
            --colors-red-800: #FF4040;
            --colors-semantic-success: #39bf7c;
            --colors-semantic-success-dark: #288657;
            --colors-semantic-success-light: #e7f8f0;
            --colors-semantic-failure: #ff4040;
            --colors-semantic-failure-dark: #f50000;
            --colors-semantic-failure-lighten: #ffe0e0;
            --colors-semantic-warning: #ffc600;
            --colors-semantic-warning-dark: #b38c00;
            --colors-semantic-warning-lighten: #fff8e0;
            --colors-semantic-severity-fallback: #92A5AE;
            --typography-button-font-size: 0.875rem;
            --typography-button-font-weight: 500;
            --typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
            --typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            --typography-font-color-dark: #222627;
            --layout-border-radius-small: 2px;
            --layout-grid-gutter: 24;
            --layout-grid-columns: 12;
            --shapes-radius-small: 2px;
            --shapes-radius-medium: 3px;
            --shapes-radius-large: 5px;
            --shapes-radius-round: 50%;
            --shadows-subtle: 0px 1px 4px 0px rgba(0, 0, 0, 0.16);
            --shadows-pronounced: 0px 2px 5px 0px rgba(0, 0, 0, 0.24);
            --shadows-strong: 0px 3px 10px 0px rgba(0, 0, 0, 0.24);
            --shadows-soft: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
            --spacing-xxsmall: 0.25rem;
            --spacing-xsmall: 0.5rem;
            --spacing-small: 0.75rem;
            --spacing-normal: 1rem;
            --spacing-medium: 1.25rem;
            --spacing-large: 2rem;
            --spacing-xlarge: 3rem;
            --spacing-xxlarge: 6rem;
            --content-max-width: 1000px;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>

</html>